From f7d5d83dd01033ced59e7d5cc6f7c0a413815dfb Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 27 Aug 2015 11:08:23 +0200 Subject: [PATCH] HighContrast: GtkListBox fixes Make flat buttons in list-rows work. --- gtk/theme/HighContrast/_common.scss | 83 +++++++--------------- gtk/theme/HighContrast/gtk.css | 104 ++++------------------------ 2 files changed, 38 insertions(+), 149 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index f59b40546c..c5a6710039 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1927,6 +1927,7 @@ GtkScrolledWindow { padding: 2px; } + .list-row.activatable, .list-row.activatable:backdrop, .list-row.activatable:backdrop:active, @@ -1942,76 +1943,40 @@ GtkScrolledWindow { border-style: none; // I need no borders here border-radius: 0; // and no rounded corners box-shadow: none; // and no box-shadow - -} - -.list-row.activatable { - @extend %undecorated_button; - background-color: transparentize($base_color,1); // for the transition - border-style: none; // I need no borders here - border-radius: 0; // and no rounded corners - box-shadow: none; // and no box-shadow - &:hover { - background-color: mix($fg_color, $base_color, 5%); - } - &:active { - box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); - } - &:selected { - background-color: $selected_bg_color; - &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } - &:hover { - background-color: mix($fg_color, $selected_bg_color, 10%); - } - &:backdrop { background-color: $borders_color; } - } } -.list-row:selected { - @extend %selected_items; - .button { - @include button(normal, $edge:none); - border-color: $selected_borders_color; - &.flat { - @include button(undecorated, $edge:none); - color: $selected_fg_color; - } +.list-row { + &.activatable { + color: $fg_color; &:hover { - @include button(hover, $edge:none); - border-color: $selected_borders_color; + background-color: mix($fg_color, $base_color, 5%); } - &:active, &:checked { - @include button(active, $edge:none); - border-color: $selected_borders_color; + &:active { + box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } - &:backdrop, &.flat:backdrop { - @include button(backdrop, $edge:none); - border-color: $selected_borders_color; - &:active, &:checked { - @include button(backdrop-active, $edge:none); - border-color: $selected_borders_color; + &:selected { + @extend %selected_items; + background-color: $selected_bg_color; + color: $selected_fg_color; + &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } + &:hover { + background-color: mix($fg_color, $selected_bg_color, 10%); } - &:insensitive { - @include button(backdrop-insensitive, $edge:none); - border-color: $selected_borders_color; - &:active, &:checked { - @include button(backdrop-insensitive-active, $edge:none); - border-color: $selected_borders_color; - } + &:backdrop { background-color: $borders_color; } + .button.flat { + color: $selected_fg_color; + &:hover { color: $fg_color; } + &:active { color: $selected_fg_color; } } } - &.flat:backdrop { - @include button(undecorated); - color: $backdrop_base_color; - } - &:insensitive { - @include button(insensitive, $edge:none); - border-color: $selected_borders_color; - &:active, &:checked { @include button(insensitive-active, $edge:none); } - } + } + .button.flat { + color: $fg_color; + &:active { color: $selected_fg_color; } } } + // transition .list-row, .list-row.activatable { transition: all 300ms $ease-out-quad; diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 6b8dc10de0..ffbd86355e 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -2066,11 +2066,11 @@ GtkLevelBar.vertical { .level-bar.fill-block.empty-fill-block:backdrop { border-color: rgba(0, 0, 0, 0.15); } -.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, .view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, .label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected { +.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, .view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, .label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row.activatable:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected { background-color: #000; color: #fff; outline-color: rgba(255, 255, 255, 0.3); } - .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .list-row:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected { + .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .list-row.activatable:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected { background-color: #7f7f7f; color: #fff; } @@ -2128,106 +2128,30 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop { box-shadow: none; } .list-row.activatable { - background-color: rgba(255, 255, 255, 0); - border-style: none; - border-radius: 0; - box-shadow: none; } + color: #000; } .list-row.activatable:hover { background-color: #f2f2f2; } .list-row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } .list-row.activatable:selected { - background-color: #000; } + background-color: #000; + color: #fff; } .list-row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } .list-row.activatable:selected:hover { background-color: black; } .list-row.activatable:selected:backdrop { background-color: #7f7f7f; } - -.list-row:selected .button { - border-width: 2px; - border-style: solid; - color: #000; - background-image: none; - background-color: #fff; - border-color: #7f7f7f; - border-color: #000; } - .list-row:selected .button.flat { - border-width: 2px; - border-style: solid; - color: #fff; } - .list-row:selected .button:hover { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #7f7f7f; - background-image: none; - border-color: #000; } - .list-row:selected .button:active, .list-row:selected .button:checked { - border-width: 2px; - border-style: solid; - background-image: none; - color: white; - background-color: black; - border-color: #7f7f7f; - border-color: #000; } - .list-row:selected .button:backdrop, .list-row:selected .button.flat:backdrop { - border-width: 2px; - border-style: solid; - color: #000; - background-color: #fff; - border-color: #8b8b8b; - background-image: none; - text-shadow: none; - icon-shadow: none; - border-color: #000; } - .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked, .list-row:selected .button.flat:backdrop:active, .list-row:selected .button.flat:backdrop:checked { - border-width: 2px; - border-style: solid; - color: white; - background-color: #8b8b8b; - border-color: #8b8b8b; - background-image: none; - border-color: #000; } - .list-row:selected .button:backdrop:insensitive, .list-row:selected .button.flat:backdrop:insensitive { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #8b8b8b; - background-image: none; - border-color: #000; } - .list-row:selected .button:backdrop:insensitive:active, .list-row:selected .button:backdrop:insensitive:checked, .list-row:selected .button.flat:backdrop:insensitive:active, .list-row:selected .button.flat:backdrop:insensitive:checked { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #8b8b8b; - background-image: none; - background-color: whitesmoke; - border-color: #000; } - .list-row:selected .button.flat:backdrop { - border-width: 2px; - border-style: solid; + .list-row.activatable:selected .button.flat { + color: #fff; } + .list-row.activatable:selected .button.flat:hover { + color: #000; } + .list-row.activatable:selected .button.flat:active { + color: #fff; } +.list-row .button.flat { + color: #000; } + .list-row .button.flat:active { color: #fff; } - .list-row:selected .button:insensitive { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - background-color: white; - border-color: #7f7f7f; - background-image: none; - text-shadow: none; - icon-shadow: none; - border-color: #000; } - .list-row:selected .button:insensitive:active, .list-row:selected .button:insensitive:checked { - border-width: 2px; - border-style: solid; - color: #7f7f7f; - border-color: #7f7f7f; - background-image: none; - background-color: white; } .list-row, .list-row.activatable { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } -- 2.30.2